<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>#container {
    height: 500px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
  }

  .loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
  }
  </style>
  <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  <script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
  <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
  <script src="https://img.hcharts.cn/highcharts/modules/data.js"></script>
</head>
<body>
<div id="container"></div>

<script>
  var data = [
    ['杭州', 1],
    ['金华', 2],
    ['宁波', 3],
    ['舟山', 4],
    ['温州', 5],
    ['湖州', 6],
    ['嘉兴', 7],
    ['绍兴', 8],
    ['丽水', 9],
    ['台州', 10],
    ['衢州', 11]
  ];
  $.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/zhejiang.json&callback=?', function (geojson) {
    Highcharts.mapChart('container', {
      title: {
        text: 'GeoJson数据展示'
      },
      mapNavigation: {
        enabled: true,
        buttonOptions: {
          verticalAlign: 'bottom'
        }
      },
      colorAxis: {
        tickPixelInterval: 100
      },
      series: [{
        data: data,
        mapData: geojson,
        joinBy: 'name',
        keys: ['name', 'value'],
        name: 'Random data',
        states: {
          hover: {
            color: '#a4edba'
          }
        },
        dataLabels: {
          enabled: true,
          format: '{point.properties.postal}'
        }
      }]
    });
  });
</script>
</body>
</html>
